import React, { useEffect, useState } from "react";
import "./index.less";
import { NavBar, Tabs, Badge, Toast } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { partyMemberList, classificationPartyMemberList } from "../service";

const ListOfPartyMembers: React.FC = () => {
  const navigate = useNavigate();
  const [partyBranchList, setPartyBranchList] = useState([])  // 党支部列表
  const [partyMenberList, setPartyMenberList] = useState([])  // 党员列表
  
  useEffect(() => {
    classificationPartyMemberList({ villageCode: "511602006004",/* classType:selectType  */ })
      .then((res) => {
        if (res.code == 200) {
          tabsOnChange(res.data?.[0]?.organizationId)
          setPartyBranchList(res.data)
        }
      })
      .catch((error) => {
        console.log(error);
      });
  }, [])

  const tabsOnChange = function (id: string) {
    partyMemberList({ villageCode: "511602006004", organizationId: id/* classType:selectType  */ })
      .then((res) => {
        if (res.code == 200) {
          setPartyMenberList(res.data);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  }

  return (
    <div className="ListOfPartyMembers_contarnier">
      <div className="header-bg">
        <NavBar
          onBack={() => navigate("/smartPartyBuilding")}
        >
          <div className="commontitle">党员列表</div>
        </NavBar>
      </div>
      <div className="ListOfPartyMembers-content">
        <Tabs
          onChange={(e) => tabsOnChange(e)}
          defaultActiveKey={"1"}
          style={{ background: "#fff" }}
        >
          {
            partyBranchList?.map((item, index) => {
              return <Tabs.Tab
                key={Number(item?.organizationId)}
                title={
                  <Badge
                    style={{ "--right": "-10px", "--top": "8px" }}
                  >
                    {item?.organizationSimpleName}
                  </Badge>
                }
              >
                <div className="menberList">
                  {
                    partyMenberList?.map((dataItem, dataIndex) => {
                      return <div key={dataIndex} className="menberList_item">
                        <img src={dataItem?.img || "/images/mycommunity/noImage.jpg"} className="menberList_img" />
                        <div className="menberList_imformation">
                          <div className="menberList_imformation-name">{dataItem?.name || ""}</div>
                          <div className="menberList_imformation-age">党龄：{dataItem?.dangling || ""}</div>
                        </div>
                      </div>
                    })
                  }
                </div>
              </Tabs.Tab>
            })
          }

        </Tabs>
      </div>
    </div>
  );
};

export default ListOfPartyMembers;
